<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超酷科技提醒事项</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: #000;
            font-family: 'Orbitron', sans-serif;
            position: relative;
            overflow: hidden;
        }

        
       
        /* 主容器 */
        .main {
            width: 600px;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 20px;
            box-shadow: 0 0 80px rgba(0, 255, 255, 0.9);
            overflow: hidden;
            animation: fadeIn 0.5s ease;
            z-index: 1;
            position: relative;
        }

        /* 顶部区域 */
        .top {
            background: linear-gradient(45deg, #001f3f, #003366);
            padding: 30px;
            text-align: center;
            position: relative;
            border-bottom: 5px solid #00FFFF;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
        }

        /* 顶部线条动画 */
        .top::before,
        .top::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background: rgba(0, 255, 255, 0.8);
            animation: lineGlow 2s ease infinite alternate;
        }

        .top::before {
            top: 0;
        }

        .top::after {
            bottom: 0;
        }

        @keyframes lineGlow {
            0% {
                opacity: 0.2;
            }
            100% {
                opacity: 1;
            }
        }

        h1 {
            color: #00FFFF;
            margin: 0;
            text-shadow: 0 0 30px #00FFFF;
            font-size: 48px;
            letter-spacing: 8px;
            animation: textGlow 1.5s ease infinite alternate;
        }

        @keyframes textGlow {
            0% {
                text-shadow: 0 0 20px #00FFFF;
            }
            100% {
                text-shadow: 0 0 40px #00FFFF;
            }
        }

        /* 输入框区域 */
        .input-box {
            display: flex;
            margin-top: 25px;
            justify-content: center;
        }

        input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: #00FFFF;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
            font-size: 18px;
            transition: all 0.3s ease;
        }

        input:focus {
            outline: none;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.9);
        }

        /* 按钮样式 */
        button {
            padding: 15px 25px;
            background: #00FFFF;
            color: #000;
            border: none;
            border-radius: 10px;
            margin-left: 20px;
            cursor: pointer;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transform: skewX(-20deg);
            transition: left 0.3s ease;
        }

        button:hover::before {
            left: 100%;
        }

        button:hover {
            background: #00FFCC;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.9);
            transform: scale(1.1);
        }

        /* 列表区域 */
        .list {
            padding: 30px;
        }

        /* 列表项样式 */
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
            animation: slideIn 0.3s ease;
            position: relative;
            transition: all 0.3s ease;
        }

        .item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: #00FFFF;
            border-radius: 10px 0 0 10px;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        .item:hover {
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.9);
            transform: scale(1.05);
        }

        /* 列表项文本 */
        .item span {
            flex: 1;
            color: #00FFFF;
            font-size: 20px;
        }

        /* 操作按钮 */
        .action {
            background: #006666;
            color: #00FFFF;
            margin-left: 15px;
        }

        .action:hover {
            background: #009999;
        }

        /* 删除按钮 */
        .delete {
            background: #FF3333;
            color: white;
        }

        .delete:hover {
            background: #FF6666;
        }

        /* 禁用按钮 */
        button:disabled {
            background: #666;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 滑入动画 */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 列表项删除动画 */
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.8);
            }
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top">
            <h1>提醒事项</h1>
            <div class="input-box">
                <input type="text" placeholder="输入提醒内容">
                <button><i class="fa-solid fa-plus"></i> 添加</button>
            </div>
        </div>
        <div class="list">
            <!-- 内容项将通过 JavaScript 动态添加 -->
        </div>
    </div>
    <script>
        const input = document.querySelector('input');
        const addBtn = document.querySelector('.top button');
        const list = document.querySelector('.list');
        let count = 1;

        addBtn.addEventListener('click', () => {
            const value = input.value.trim();
            if (value) {
                const item = document.createElement('div');
                item.className = 'item';

                const text = document.createElement('span');
                text.textContent = `${count++}. ${value}`;

                const up = document.createElement('button');
                up.className = 'action';
                up.innerHTML = '<i class="fa-solid fa-arrow-up"></i> 上移';

                const down = document.createElement('button');
                down.className = 'action';
                down.innerHTML = '<i class="fa-solid fa-arrow-down"></i> 下移';

                const del = document.createElement('button');
                del.className = 'delete';
                del.innerHTML = '<i class="fa-solid fa-trash"></i> 删除';

                item.append(text, up, down, del);
                list.append(item);
                input.value = '';

                up.addEventListener('click', () => {
                    const prev = item.previousElementSibling;
                    if (prev) {
                        list.insertBefore(item, prev);
                        updateNumbers();
                        updateButtons();
                    }
                });

                down.addEventListener('click', () => {
                    const next = item.nextElementSibling;
                    if (next) {
                        list.insertBefore(next, item);
                        updateNumbers();
                        updateButtons();
                    }
                });

                del.addEventListener('click', () => {
                    item.style.animation = 'fadeOut 0.3s ease forwards';
                    setTimeout(() => {
                        list.removeChild(item);
                        count--;
                        updateNumbers();
                        updateButtons();
                    }, 300);
                });

                updateButtons();
            }
        });

        function updateNumbers() {
            const items = list.querySelectorAll('.item');
            items.forEach((item, index) => {
                const text = item.querySelector('span');
                const content = text.textContent.split('. ').slice(1).join('. ');
                text.textContent = `${index + 1}. ${content}`;
            });
        }

        function updateButtons() {
            const items = list.querySelectorAll('.item');
            items.forEach((item, index) => {
                const up = item.querySelector('.action:nth-child(2)');
                const down = item.querySelector('.action:nth-child(3)');
                up.disabled = index === 0;
                down.disabled = index === items.length - 1;
            });
        }
    </script>
</body>

</html>